<!--
 * @Author: hq
 * @Date: 2022-05-24 10:21:11
 * @LastEditors: hq
 * @LastEditTime: 2022-07-12 19:24:20
 * @Description: 编辑弹窗
 * @version: 1.0
-->
<template>
  <div class="dialog">
    <div class="content">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="角色名" prop="name">
          <el-input
            v-model="ruleForm.name"
            placeholder="请输入角色名"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色介绍" prop="intro">
          <el-input
            v-model="ruleForm.intro"
            placeholder="请输入角色名"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" :required="true">
          <el-switch
            active-text="禁用"
            inactive-text="启用"
            :active-value="1"
            :inactive-value="0"
            class="tablescope"
            v-model="ruleForm.status"
          >
          </el-switch>
        </el-form-item>
      </el-form>

      <div class="row">
        <div class="col">权限</div>
        <Tree :auth="ruleForm.auth" @selectTree="selectTree"></Tree>
      </div>
    </div>

    <div class="btn">
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { editdminRole, addAdminRole } from "@/api/manager";
import Tree from "@/components/tree.vue";
export default {
  props: ["rowData"],
  components: { Tree },
  data() {
    return {
      ruleForm: {
        name: "",
        intro: "",
        status: 1,
        auth: [], //默认选中的树
      },
      rules: {
        name: [{ required: true, message: "请输入角色名", trigger: "blur" }],
      },
    };
  },
  methods: {
    //新增
    async addAdminRole() {
      const { msg, err } = await addAdminRole({
        name: this.ruleForm.name,
        intro: this.ruleForm.intro,
        status: this.ruleForm.status,
        auth: this.ruleForm.auth.join(","),
      });
      if (err === 0) {
        this.$emit("handleClose");
        this.$message({
          showClose: true,
          message: "操作成功",
          type: "success",
        });
      } else {
        this.$message({
          showClose: true,
          message: "操作失败",
          type: "error",
        });
      }
    },
    //编辑
    async editdminRole() {
      const { msg, err } = await editdminRole({
        id: this.rowData.id,
        name: this.ruleForm.name,
        intro: this.ruleForm.intro,
        status: this.ruleForm.status,
        auth: this.ruleForm.auth.join(","),
      });
      if (err === 0) {
        this.$emit("handleClose");
        this.$message({
          showClose: true,
          message: "操作成功",
          type: "success",
        });
      } else {
        this.$message({
          showClose: true,
          message: "操作失败",
          type: "error",
        });
      }
    },

    handleSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.rowData.id) {
            this.editdminRole();
          } else {
            this.addAdminRole();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    selectTree(val) {
      console.log(val);
      this.ruleForm.auth = val;
    },
  },
  created() {
    if (this.rowData.id) {
      //编辑
      this.ruleForm = this.rowData;
      if (typeof this.rowData.auth == "string") {
        this.ruleForm.auth = this.ruleForm.auth.split(",").map(Number);
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.dialog {
  padding: 0 20px;
  box-sizing: border-box;
  height: 100%;
  .content {
    height: 92%;
    overflow: auto;
    &::-webkit-scrollbar {
      width: 0;
    }
  }
  .row {
    display: flex;
    margin-bottom: 20px;
    align-items: flex-start;
    .col {
      width: 80px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-shrink: 0;
      margin-right: 10px;
    }
    .red {
      margin-right: 5px;
    }
  }

  .el-input__inner {
    height: 36px;
    line-height: 36px;
  }
  .btn {
    box-sizing: border-box;
    .el-button {
      margin-left: 100px;
    }
  }
}
</style>
